<template>
	<div class="addVideo">
		<el-dialog
			title="退费确认"
			:visible.sync="dialogVisible"
			width="600px"
			:modal-append-to-body="false"
			:close-on-click-modal="false"
			custom-class="custom-dialog"
		>
			<el-form
				ref="forms"
				size="small"
				:model="forms"
				:rules="rules"
				label-width="110px"
				label-position="right"
			>
				<el-form-item label="赛事名称：" style="margin-bottom: 0">
					{{ forms.group_name }}
				</el-form-item>
				<el-form-item label="用户姓名：" style="margin-bottom: 0">
					{{ forms.player_name }}
				</el-form-item>
				<el-form-item label="用户手机号：" style="margin-bottom: 5px">
					{{ forms.player_mobile }}
				</el-form-item>
				<el-form-item label="退款金额：" prop="refund_money" style="margin-bottom: 20px">
					<el-input
						v-model="forms.refund_money"
						style="width: 100%"
						clearable=""
						placeholder="请输入退款金额"
						@input="onInput"
					/>
				</el-form-item>
				<el-form-item label="退款原因：" prop="refund_rerson">
					<el-input
						v-model="forms.refund_rerson"
						placeholder="请输入退款原因"
						clearable
						type="textarea"
						maxlength="100"
						show-word-limit
						resize="none"
						:autosize="{ minRows: 4 }"
						style="width: 100%"
					/>
				</el-form-item>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button style="margin-right: 5px" size="small" @click="dialogVisible = false">
					取消
				</el-button>
				<el-button type="primary" size="small" @click="saveVideos" v-prevent-click>确定</el-button>
			</span>
		</el-dialog>
	</div>
</template>
<script>
	import { orderRefund } from '@/api/order.js'
	import { inputLimit } from '@/utils/utils.js'
	export default {
		name: 'OrderShenhe',
		data() {
			const validateNumber = (rule, value, callback) => {
				if (value - this.forms.pay_money > 0) {
					callback(new Error('退款金额不能大于支付金额' + this.forms.pay_money))
				} else {
					callback()
				}
			}
			return {
				dialogVisible: false,
				disabled: false,
				forms: {},
				rules: {
					refund_rerson: [{ required: true, message: '请输入退款原因', trigger: 'change' }],
					refund_money: [
						{ required: true, message: '请输入退款金额', trigger: 'change' },
						{ validator: validateNumber, trigger: 'blur' }
					]
				}
			}
		},
		methods: {
			initData(info) {
				this.dialogVisible = true
				this.forms = {
					...info,
					refund_rerson: '',
					refund_money: ''
				}
				this.$nextTick(() => {
					this.$refs.forms.clearValidate()
				})
			},
			onInput(value) {
				this.$set(this.forms, 'refund_money', inputLimit(value))
			},
			// 保存
			async saveVideos() {
				this.$refs.forms.validate(async valid => {
					if (valid) {
						this.$confirm(
							`是否确认为用户${this.forms.player_name}${this.forms.player_mobile}退费?`,
							'退费确认',
							{
								confirmButtonText: '确定',
								cancelButtonText: '取消'
							}
						)
							.then(({ value }) => {
								const loading = this.$setLoading({ text: '提交中，请稍等~' })
								orderRefund(this.forms).then(
									res => {
										this.$message.success(`操作成功！`)
										this.dialogVisible = false
										this.$parent.loadData()
										loading.close()
									},
									err => {
										loading.close()
									}
								)
							})
							.catch(() => {})
					}
				})
			}
		}
	}
</script>
<style lang="scss" scoped>
	.addVideo {
		::v-deep {
			.el-dialog .el-dialog__body {
				padding-bottom: 20px;
			}
			.el-form-item--small .el-form-item__label {
				line-height: 32px;
			}
		}
		.box-wrap {
			display: flex;
			align-items: center;
			flex-wrap: wrap;
		}
	}
</style>
